<template>
  <!-- 使用拖拽的api  给标签添加dragstart属性 ,然后绑定几个拖拽事件-->
  <!-- 课程表 -->

  <!-- vue好像有个vue-dragabel -->
  <!-- <dragabel></dragabel> -->
  <div>
    <div id="lists">
      <div class="course" data-type="none">
        <div class="list" data-type="none">
          <div
            draggable
            data-type="copy"
            class="display"
            style="width: 100%; height: 100%"
          >
            语文
          </div>
        </div>
        <div class="list" data-type="none">
          <div
            draggable
            data-type="copy"
            class="display"
            style="width: 100%; height: 100%; background-color: #456"
          >
            数学
          </div>
        </div>
        <div class="list" data-type="none">
          <div
            draggable
            data-type="copy"
            class="display"
            style="width: 100%; height: 100%"
          >
            体育
          </div>
        </div>
      </div>
      <table id="table" style="border: 1px solid black">
        <thead>
          <tr style="height: 100px; border: 1px solid black">
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
          </tr>
        </thead>
        <tbody>
          <tr style="height: 100px; border: 1px solid black">
            <td data-type="copy"></td>
            <td data-type="copy"></td>
            <td data-type="copy"></td>
            <td data-type="copy"></td>
          </tr>
          <tr style="height: 100px; border: 1px solid black">
            <td data-type="copy"></td>
            <td data-type="copy"></td>
            <td data-type="copy"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <div v-for="(item, index) in list" :key="index">
        <div>
          <span v-for="(itm, indx) in item" :key="indx">
            {{ itm || "" }}
          </span>
        </div>
      </div>
    </div>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ele: "", //选择的节点
      list: [],
      HTMLlist: [],
    };
  },
  mounted() {
    this.addList();
    this.list = JSON.parse(window.sessionStorage.getItem("list"));
    this.HTMLlist = JSON.parse(window.sessionStorage.getItem("HTMLlist"));
    this.show();
  },
  beforeDestroy() {
    const el = document.querySelector("#lists");
    el.removeEventListener("dragstart");
    el.removeEventListener("dragover");
    el.removeEventListener("dragenter");
    el.removeEventListener("drop");
  },
  methods: {
    // 复显课表
    show() {
      const tbody = document.querySelectorAll("tbody");
      tbody[0].childNodes.forEach((val, index) => {
        // console.log(val);
        val.childNodes.forEach((value, indx) => {
          // console.log(value.innerHTML, value.innerText);
          value.innerHTML = this.HTMLlist[index][indx];
        });
      });
    },
    submit() {
      this.list = [];
      this.HTMLlist = [];
      const tbody = document.querySelectorAll("tbody");
      tbody[0].childNodes.forEach((val) => {
        let Text = [];
        let HTML = [];
        // console.log(val);
        val.childNodes.forEach((value) => {
          // console.log(value.innerHTML, value.innerText);
          Text.push(value.innerText);
          HTML.push(value.innerHTML);
        });
        this.list.push(Text);
        this.HTMLlist.push(HTML);
      });
      window.sessionStorage.setItem("list", JSON.stringify(this.list));
      window.sessionStorage.setItem("HTMLlist", JSON.stringify(this.HTMLlist));
    },
    // 清空添加的class
    clearClass() {
      document.querySelectorAll(".garp").forEach((val) => {
        val.classList.remove("garp");
      });
    },
    addList() {
      const el = document.querySelector("#lists");
      // 绑定拖动开始事件
      el.addEventListener("dragstart", (e) => {
        e.dataTransfer.effectAllowed = e.target.dataset.type;
        this.ele = e.target;
      });
      // 绑定拖动移动事件
      el.addEventListener("dragover", (e) => {
        e.preventDefault();
      });

      // 绑定拖动进入某个dom元素的事件
      el.addEventListener("dragenter", (e) => {
        // console.log(e.target);
        this.clearClass();
        if (e.dataTransfer.effectAllowed == e.target.dataset.type) {
          e.target.classList.add("garp");
        }
      });

      // 绑定拖动结束后的事件
      el.addEventListener("drop", (e) => {
        this.clearClass();

        if (
          e.target.dataset.type == e.dataTransfer.effectAllowed &&
          e.target.parentNode.dataset.type != "none"
        ) {
          if (e.target.dataset.type == "copy") {
            // 克隆节点
            const clone = this.ele.cloneNode(true);
            clone.setAttribute("data-type", "move");
            e.target.appendChild(clone);
          } else {
            const cloneSelect = this.ele.cloneNode(true);
            const cloneEvent = e.target.cloneNode(true);
            e.target.parentNode.replaceChild(cloneSelect, e.target);
            this.ele.parentNode.replaceChild(cloneEvent, this.ele);
          }
        }
        if (
          (e.dataTransfer.effectAllowed == "move" &&
            e.target.parentNode.dataset.type == "none") ||
          (e.target.dataset.type == "none" &&
            e.dataTransfer.effectAllowed == "move")
        ) {
          this.ele.remove();
        }
        if (
          e.dataTransfer.effectAllowed == "move" &&
          e.target.dataset.type == "copy" &&
          e.target.parentNode.dataset.type != "none"
        ) {
          const clone = this.ele.cloneNode(true);
          e.target.appendChild(clone);
          this.ele.remove();
        }
      });
    },
  },
};
</script>

<style scoped>
.garp {
  background-color: gray;
}
td {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.display {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blueviolet;
}
.list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin-top: 10px;
  border: 1px solid black;
}
#lists {
  display: flex;
}
</style>